<template>
	<view class="container">
		<view class="flex diygw-col-24">
			<diy-noticebar class="flex1 diy-notice-bar" color="#07c160" bgColor="#fff" leftIcon="diy-icon-notification">
				<!-- #ifndef VUE3 -->
				<block slot="content">
					<text class="diy-notice-item"> DIY官网做最好的拖拽式可视化设计工具 </text>
				</block>
				<!-- #endif -->
				<!-- #ifdef VUE3 -->
				<block v-slot:content>
					<text class="diy-notice-item"> DIY官网做最好的拖拽式可视化设计工具 </text>
				</block>
				<!-- #endif -->
			</diy-noticebar>
		</view>
		<view class="flex diygw-col-24">
			<diy-noticebar class="flex1 diy-notice-bar" color="rgba(193, 38, 7, 1)" bgColor="#fff" leftIcon="diy-icon-notification">
				<!-- #ifndef VUE3 -->
				<block slot="content">
					<text class="diy-notice-item"> DIY官网做最好的拖拽式可视化设计工具 </text>
				</block>
				<!-- #endif -->
				<!-- #ifdef VUE3 -->
				<block v-slot:content>
					<text class="diy-notice-item"> DIY官网做最好的拖拽式可视化设计工具 </text>
				</block>
				<!-- #endif -->
			</diy-noticebar>
		</view>
		<view class="flex diygw-col-24 noticebar3-clz">
			<diy-noticebar class="flex1 diy-notice-bar" color="rgba(193, 38, 7, 1)" bgColor="#fff" leftIcon="diy-icon-notification">
				<!-- #ifndef VUE3 -->
				<block slot="content">
					<text class="diy-notice-item"> DIY官网做最好的拖拽式可视化设计工具 </text>
				</block>
				<!-- #endif -->
				<!-- #ifdef VUE3 -->
				<block v-slot:content>
					<text class="diy-notice-item"> DIY官网做最好的拖拽式可视化设计工具 </text>
				</block>
				<!-- #endif -->
			</diy-noticebar>
		</view>
		<view class="flex diygw-col-24 noticebar-clz">
			<diy-noticebar class="flex1 diy-notice-bar" color="rgba(255, 255, 255, 1)" bgColor="rgba(255, 46, 46, 1)" leftIcon="diy-icon-notification">
				<!-- #ifndef VUE3 -->
				<block slot="content">
					<text class="diy-notice-item"> DIY官网做最好的拖拽式可视化设计工具 </text>
				</block>
				<!-- #endif -->
				<!-- #ifdef VUE3 -->
				<block v-slot:content>
					<text class="diy-notice-item"> DIY官网做最好的拖拽式可视化设计工具 </text>
				</block>
				<!-- #endif -->
			</diy-noticebar>
		</view>
		<view class="flex diygw-col-24">
			<diy-noticebar class="flex1 diy-notice-bar" vertical="true" color="#07c160" bgColor="#fff" leftIcon="diy-icon-notification">
				<!-- #ifndef VUE3 -->
				<block slot="content">
					<swiper class="diy-notice-swiper flex1" circular vertical autoplay interval="3000" duration="500">
						<swiper-item>
							<view class="diy-notice-swiper-item"> DIY官网做最好的拖拽式可视化设计工具 </view>
						</swiper-item>
						<swiper-item>
							<view class="diy-notice-swiper-item"> 支持导出UNIAPP、微信小程序、支付宝小程序 </view>
						</swiper-item>
					</swiper>
				</block>
				<!-- #endif -->
				<!-- #ifdef VUE3 -->
				<block v-slot:content>
					<swiper class="diy-notice-swiper flex1" circular vertical autoplay interval="3000" duration="500">
						<swiper-item>
							<view class="diy-notice-swiper-item"> DIY官网做最好的拖拽式可视化设计工具 </view>
						</swiper-item>
						<swiper-item>
							<view class="diy-notice-swiper-item"> 支持导出UNIAPP、微信小程序、支付宝小程序 </view>
						</swiper-item>
					</swiper>
				</block>
				<!-- #endif -->
			</diy-noticebar>
		</view>
		<view class="flex diygw-col-24 noticebar6-clz">
			<diy-noticebar class="flex1 diy-notice-bar" vertical="true" color="#07c160" bgColor="#fff" leftIcon="diy-icon-notification">
				<!-- #ifndef VUE3 -->
				<block slot="content">
					<swiper class="diy-notice-swiper flex1" circular vertical autoplay interval="3000" duration="500">
						<swiper-item>
							<view class="diy-notice-swiper-item"> DIY官网做最好的拖拽式可视化设计工具 </view>
						</swiper-item>
						<swiper-item>
							<view class="diy-notice-swiper-item"> 支持导出UNIAPP、微信小程序、支付宝小程序 </view>
						</swiper-item>
					</swiper>
				</block>
				<!-- #endif -->
				<!-- #ifdef VUE3 -->
				<block v-slot:content>
					<swiper class="diy-notice-swiper flex1" circular vertical autoplay interval="3000" duration="500">
						<swiper-item>
							<view class="diy-notice-swiper-item"> DIY官网做最好的拖拽式可视化设计工具 </view>
						</swiper-item>
						<swiper-item>
							<view class="diy-notice-swiper-item"> 支持导出UNIAPP、微信小程序、支付宝小程序 </view>
						</swiper-item>
					</swiper>
				</block>
				<!-- #endif -->
			</diy-noticebar>
		</view>
		<view class="flex diygw-col-24 noticebar1-clz">
			<diy-noticebar class="flex1 diy-notice-bar" vertical="true" color="#ffffff" bgColor="#07c160" leftIcon="diy-icon-notification">
				<!-- #ifndef VUE3 -->
				<block slot="content">
					<swiper class="diy-notice-swiper flex1" circular vertical autoplay interval="3000" duration="500">
						<swiper-item>
							<view class="diy-notice-swiper-item"> DIY官网做最好的拖拽式可视化设计工具 </view>
						</swiper-item>
						<swiper-item>
							<view class="diy-notice-swiper-item"> 支持导出UNIAPP、微信小程序、支付宝小程序 </view>
						</swiper-item>
					</swiper>
				</block>
				<!-- #endif -->
				<!-- #ifdef VUE3 -->
				<block v-slot:content>
					<swiper class="diy-notice-swiper flex1" circular vertical autoplay interval="3000" duration="500">
						<swiper-item>
							<view class="diy-notice-swiper-item"> DIY官网做最好的拖拽式可视化设计工具 </view>
						</swiper-item>
						<swiper-item>
							<view class="diy-notice-swiper-item"> 支持导出UNIAPP、微信小程序、支付宝小程序 </view>
						</swiper-item>
					</swiper>
				</block>
				<!-- #endif -->
			</diy-noticebar>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {};
		},
		onShareAppMessage: function () {},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: option
				});
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {}
		}
	};
</script>

<style lang="scss" scoped>
	.noticebar3-clz {
		margin-left: 5px;
		border-bottom-left-radius: 6px;
		box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.noticebar-clz {
		margin-left: 5px;
		border-bottom-left-radius: 6px;
		box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.noticebar6-clz {
		margin-left: 5px;
		border-bottom-left-radius: 6px;
		box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.noticebar1-clz {
		margin-left: 5px;
		border-bottom-left-radius: 6px;
		box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.container {
		padding-left: 0px;
		padding-right: 0px;
	}
</style>
